<template>
	<view class="common-login">
		<view class="head">
			<view class="head_bg">
				<view class="head_inner_bg">
					<image style="height: 65px;" :src="imgInfo.head" class="head_logo" />
				</view>
			</view>
		</view>
		<!-- 手机号验证码登录 -->
		<view class="form">
			<view class="input">
				<input type="number" :value="phoneNo" placeholder="请输入手机号" maxlength="11" disabled/>
			</view>
			<view class="code">
				<input type="number" ref="code" v-model="code" placeholder="请输入验证码" maxlength="4" v-focus="codestatus" />
				<button type="primary" plain="" @click="verCode()">{{codetext}}</button>
			</view>
			<view class="input">
				<input type="password" v-model="newloginpwd" placeholder="请输入新登录密码" maxlength="30"/>
			</view>
			<view class="input">
				<input type="password" v-model="confirmpwd" placeholder="请确认登录密码" maxlength="30"/>
			</view>
		</view>
		<!-- 登录提交 -->
		<button class="submit" type="primary" @tap="updateNow()">确 定</button>
		<vercode ref="vercode" :contentHeight="480" v-on:changeCodetxt="changeCodetxt"></vercode>
	</view>
</template>

<script>
	import resetpwd from '@/api/user/resetpwd.js'
	import vercode from '@/components/vercode/index.vue'
	import local_userinfo from '@/util/user/local-userinfo.js'
	
	export default {
		components: {
			vercode
		},
		data() {
			return {
				phoneNo: '',
				password: '',
				code: '',
				codestatus: false,
				codetext: '获取短信码',
				tickcount: 0,
				codeAgainGet: true,
				newloginpwd:'',
				confirmpwd:'',
				sessionid:'',
				wantJumpurl: '',
				imgInfo: {
					head: '/static/login/head.png',
					icon_del: '/static/login/icon_del.png',
					icon_pwd_switch: '/static/login/icon_pwd_switch.png'
				}
			}
		},
		onShow() {
		},
		onLoad(options) {
			let localInfo = local_userinfo.getUserinfo()
			this.phoneNo = localInfo.phone
			this.sessionid=localInfo.sessionid
			
			// #ifdef MP-WEIXIN
			uni.hideShareMenu()
			// #endif
		},
		methods: {
			verCode() {
				if (this.codeAgainGet) {
					let phone = this.phoneNo
					if (!/^1[2|3|4|5|6|7|8|9][0-9]\d{4,8}$/.test(phone)) {
						return uni.showToast({
							title: '手机号格式错误',
							mask: true,
							duration: 1500,
							icon: 'none'
						});
					}
					this.$refs.vercode.toggleMask(phone);
				}
			},
			changeCodetxt(tickcount) {
				var _this = this
				var dg = null
				_this.codestatus=true
				_this.codeAgainGet = false
				if (!_this.codeAgainGet) {
					var i = tickcount; //服务器传的时间   
					_this.tickcount = tickcount;
					dg = function() {
						if (i >= 0) {
							_this.codetext = i + "s后重新获取";
							_this.tickcount = i;
							i--;
							setTimeout(function() {
								dg();
							}, 1000);
						} else {
							_this.codeAgainGet = true;
							_this.codetext = "重新获取";
						}
					}
					dg();
				}
			},
			updateNow(){
				let phone = this.phoneNo,
					code = this.code,
					pwd = this.newloginpwd,
					_this = this;
				if (!/^1[2|3|4|5|6|7|8|9][0-9]\d{4,8}$/.test(phone)) {
					return uni.showToast({
						title: '手机号格式错误',
						mask: true,
						duration: 1500,
						icon: 'none'
					});
				}
				if (code.length != 4) {
					return uni.showToast({
						title: '请输入手机验证码',
						mask: true,
						duration: 1500,
						icon: 'none'
					});
				}
				resetpwd.resetLoginPwd(phone,this.sessionid,code,pwd,this.confirmpwd)
			}
		},
		directives: {
			focus: {
				inserted: function(el, {
					value
				}) {
					if (value) {
						el.focus();
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	page {
		height: auto;
		min-height: 100%;
		background-color: #fff;
	}

	.common-login {
		$logo-padding: 60upx;
		$form-border-color: #26cad3;
		$form-input-height: 70upx;

		.page_login {
			padding: 20upx;
		}

		.head {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: $logo-padding;
			padding-bottom: 0;

			.head_bg {
				border-radius: 100upx;
				width: 200upx;
				height: 200upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.head_inner_bg {
					border-radius: 80upx;
					width: 160upx;
					height: 160upx;
					display: flex;
					align-items: flex-end;
					justify-content: center;
					overflow: hidden;
				}
			}
		}

		.form {
			display: flex;
			margin: 40upx;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 28upx;
			color: #333;

			.code {
				width: 100%;
				height: $form-input-height;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				input {
					width: 100%;
					outline: none;
					height: $form-input-height;
					border: 1px solid $form-border-color;
					border-radius: 10upx;
					padding-left: 20upx;

					&:focus {
						outline: none;
					}
				}

				button {
					width: 300upx;
					height: $form-input-height;
					line-height: $form-input-height;
					font-size: 24upx;
					color: #26cad3;
					border: 1px solid $form-border-color;
					margin-left: 20upx;
				}
			}

			.input {
				width: 100%;
				height: $form-input-height;
				margin: 20upx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				border: 1px solid $form-border-color;
				border-radius: 10upx;

				input {
					outline: none;
					margin-left: 20upx;
					height: 60upx;
					width: 100%;

					&:focus {
						outline: none;
					}
				}

				.img {
					min-width: 80upx;
					min-height: 80upx;
					margin: 10upx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.img_del {
					width: 42upx;
					height: 42upx;
				}

				.img_pwd_switch {
					width: 56upx;
					height: 24upx;
				}

			}
		}

		.submit {
			margin-left: 40upx;
			margin-right: 40upx;
			color: white;
			background-color: $form-border-color;
			-webkit-tap-highlight-color: $form-border-color;

			&:active {
				color: #fff;
				background-color: $form-border-color;
			}
		}

		.tip {
			font-size: 24upx;
			color: #999;
			text-align: left;
			margin: 56upx 40upx 12upx;
		}

		.transte-other {
			font-size: 26upx;
			color: #999;
			text-align: center;
			padding: 0 10upx;
			margin-top: 50upx;

			text {
				border-bottom: 1px solid #999;
			}
		}
	}
</style>
